<template>
  <view class="page flex-col">
    <view class="box_7 flex-col">
      <view class="grid_3 flex-row">
        <scroll-view scroll-y="true"
          :show-scrollbar="false"
          :refresher-enabled="true"
          :refresher-triggered="triggered"
          @scrolltolower="loadMoreData" 
          @refresherrefresh="refreshData"
          class="scroll-view">
          <view class="grid">
            <view class="list-items_1 flex-col"
              v-for="(item, index) in loopData"
              :key="index">
              <view class="image-text_16 flex-col">
                <img class="box_3 flex-col" :src="item.experiment_thumb_url" alt="" srcset="">
                <text class="text-class" v-html="item.class_name"></text>
                <text class="text-group_2" v-html="item.name"></text>
              </view>
              <view class="text-wrapper_9 flex-row">
                <text class="text_6" v-html="item?item.experiment_date:''"></text>
              </view>
            </view>
            <text class="text_9" v-if="isFinish">没有更多了～</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <bottomBackBtn></bottomBackBtn>
  </view>
</template>
<script>
import API from '@/api/teacherapi.js'
export default {
  data() {
    return {
      loopData: [],
      triggered: true,
      current: 1,
      pageSize: 10,
      isFinish: false,
      options: [
        {
          label: '标准实验库',
          value: 1,
        },
        {
          label: '校本实验库',
          value: 2,
        },
      ],
    };
  },
  async onLoad() {
    await this.loadMoreData()
  },
  methods: {
    async loadMoreData(){
      if (this.isFinish && !this.triggered) {
        return
      }
      let param = {
        current: this.current,
        pageSize: this.pageSize
      }
      let res = await API.TeacherExperimentPagedList({args: param})
      this.triggered = false
      if(res){
        this.loopData = [...this.loopData, ...res.data]
        if(this.loopData.length == res.total){
          this.isFinish = true
        } else {
          this.current++;
          this.isFinish = false;
        }
      }
      console.log(this.loopData)
    },
    async refreshData() {
      this.current = 1
      this.loopData = []
      this.triggered = true
      await this.loadMoreData()
    },
	  gotoDetail(item){
      uni.navigateTo({
        url: '/pages/index/detail?experiment_id='+ item.experiment_id
      });
	  },
  },
};
</script>
<style lang="less" scoped>
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .box_7 {
    height: calc(100% - 144rpx - env(safe-area-inset-bottom));
    .box_1 {
      box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
      background-color: rgba(255, 255, 255, 1);
      padding-top: 24rpx;
      padding-bottom: 24rpx;
      .block_3 {
        background-color: rgba(248, 249, 251, 1);
        border-radius: 19px;
        width: 686rpx;
        align-self: center;
        padding: 20rpx 422rpx 20rpx 20rpx;
        .image-text_15 {
          width: 244rpx;
          .thumbnail_5 {
            width: 40rpx;
            height: 40rpx;
          }
          .text-group_1 {
            overflow-wrap: break-word;
            color: rgba(191, 191, 191, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
          }
        }
      }
      .block_4 {
        box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
        background-color: rgba(255, 255, 255, 1);
        margin-top: 24rpx;
        padding: 12rpx 24rpx 0 24rpx;
        .text-wrapper_8 {
          width: 100%;

          .tab{
            overflow-wrap: break-word;
            color: rgba(89, 89, 89, 1);
            font-size: 28rpx;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
            position: relative;
          }
          .tab-active{
            color: rgba(39, 118, 255, 1);
          font-family: PingFangSC-Medium;
          font-weight: 500;
          }
          .tab-active:before{
            content: '';
            position: absolute;
            bottom: -20%;
            left: calc(50% - 20rpx);
            width: 40rpx;
            height: 6rpx;
            border-radius: 3rpx;
            background: rgba(39, 118, 255, 1);
          }
        }
        .box_8 {
          margin: 6rpx 276rpx 0 30rpx;
          .box_2 {
            background-color: rgba(39, 118, 255, 1);
            border-radius: 4px 4px 0px 0px;
            width: 80rpx;
            height: 6rpx;
          }
        }
      }
    }
    .grid_3 {
      width: 696rpx;
      height: 100%;
      flex: 1;
      flex-wrap: wrap;
      margin: 24rpx 30rpx 0 24rpx;
      .grid{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 148rpx;

        .list-items_1 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 12px;
          width: 336rpx;
          height: 404rpx;
          padding-bottom: 16rpx;
          margin: 0 24rpx 24rpx 0;
          &:nth-child(2n) {
            margin-right: 0;
          }
          &:nth-last-child(-n + 2) {
            margin-bottom: 0;
          }
          .image-text_16 {
            .box_3 {
              border-radius: 12px 12px 0px 0px;
              width: 336rpx;
              min-height: 220rpx;
              background-color: #8C8C8C;
            }
            .text-class{
              width: 112rpx;
              height: 32rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #262626;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
            .text-group_2 {
              width: 288rpx;
              overflow-wrap: break-word;
              color: rgba(38, 38, 38, 1);
              font-size: 28rpx;
              font-family: PingFangSC-Medium;
              font-weight: 500;
              text-align: left;
              line-height: 40rpx;
              align-self: center;
              margin-top: 24rpx;
            }
          }
          .text-wrapper_9 {
            width: 288rpx;
            align-self: center;
            margin-top: 32rpx;
            .text_6 {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8C8C8C;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
            }
            .text_7 {
              overflow-wrap: break-word;
              color: rgba(255, 112, 36, 1);
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
              margin-left: 96rpx;
            }
            .text_8 {
              overflow-wrap: break-word;
              color: rgba(140, 140, 140, 1);
              font-size: 24rpx;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 32rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }
    .text_9 {
      overflow-wrap: break-word;
      color: rgba(191, 191, 191, 1);
      font-size: 24rpx;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 34rpx;
      margin: 32rpx 300rpx 0 306rpx;
    }
  }
}

.scroll-view {
  width: 100%;
  height: 100%;
}
.box_1 {
  background-color: rgba(255, 255, 255, 1);
  padding: 26rpx 32rpx 18rpx 32rpx;
  height: 212rpx;
}

.block_1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  border: 1px solid rgba(230, 235, 241, 1);
  padding: 20rpx 282rpx 20rpx 284rpx;
}

.image-text_4 {
  width: 116rpx;
}

.thumbnail_9 {
  width: 40rpx;
  height: 40rpx;
  margin: 4rpx 0 4rpx 0;
}

.text-group_2 {
  overflow-wrap: break-word;
  color: rgba(38, 38, 38, 1);
  font-size: 34rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 48rpx;
}

.image_4 {
  width: 268rpx;
  height: 10rpx;
  align-self: center;
  margin-top: 66rpx;
}

</style>
